<template>
  <div style="height:100%;position:relative;">
    <div :id="id" style="height: 100%" :style="{visibility:data&&data.length>0?'visible':'hidden'}"></div>
    <div v-show="!data||data.length===0" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "bar",
  props: {
    id: {
      type: String,
      default: "bar",
    },
    color: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    data: {
      deep: true,
      handler(nVal) {
        if (this.chart) {
          this.setOption();
        } else {
          this.initChart();
        }
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), "macarons");
      this.setOption();

      this.chart.on("click", (param) => {
        this.$emit("onClick", this.data[param.dataIndex].key);
      });

      window.addEventListener("resize", () => {
        this.chart && this.chart.resize();
      });
    },
    setOption() {
      if (!this.data || Object.keys(this.data).length === 0) {
        return;
      }

      let xData = this.data.map((item) => {
        return item.name;
      });
      let yData = this.data.map((item) => {
        return item.count;
      });

      let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    return params[0].name + ': ' + params[0].value;
                }
            },
            xAxis: {
                data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行', ],
                axisTick: {show: true},
                axisLine: {show: true},
                axisLabel: {
                    textStyle: {
                        color: '#e54035'
                    }
                }
            },
            yAxis: {
                splitLine: {show: true},
                axisTick: {show: true},
                axisLine: {show: true},
                axisLabel: {show: true}
                
            },
            color: ['#e54035'],
            series: [{
                name: 'hill',
                type: 'pictorialBar',
                //位置偏移
                barCategoryGap: '-10%',
                //图形宽度
                barWidth:50,
                //图形形状
                symbol: 'path://M150 50 L130 130 L170 130  Z',
                itemStyle: {
                    normal: {
                        opacity: 0.9
                    },
                    emphasis: {
                        opacity: 1
                    }
                },
                data: [123, 60, 25, 18, 12, 9, 20, 111],
                z: 10
            }, {
                name: 'glyph',
                type: 'pictorialBar',
                barGap: '-100%',
                symbolPosition: 'end',
                symbolSize: 50,
                symbolOffset: [0, '-120%']
            }]
        };
        this.chart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.no-data {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5c8ce;
}
</style>